import { useState } from 'react'
import ColorPicker from './components/colorPicker'
import { Color } from './model/color'
import ColorBrowser from './components/colorBrowser'
import SidebarComponent from './components/sidebarComponent'
import MemberTableComponent from './components/memberTable'

function App() {
    // <类型参数> <T> 
    const [isVisible,setIsVisible]=useState(false)
    const [color,steColor]=useState<Color>({
      red:20,
      green:20,
      blue:20
    })
    return (  
      <div className="App">
        <ColorBrowser color={color}/>
        <ColorPicker color={color} onColorUpdated={steColor}/>
        <div style={{float:"left"}}>
            <button  onClick={()=>setIsVisible(!isVisible)}>Toggle sidebar</button>
        </div>
        <SidebarComponent isVisible={isVisible}>
          <h1>Cool Scfi movies</h1>
          <ul>
            <li><a href="#">AAAAAAAAAAAAAAA</a></li>
            <li><a href="#">BBBBBBBBBBBBBBB</a></li>
            <li><a href="#">CCCCCCCCCCCCCCC</a></li>
          </ul>
        </SidebarComponent>
        <MemberTableComponent />
      </div>
      
    )
}

export default App
